<template>
  <view class="container">
    <u-navbar title="施工需求单详情" title-size="36"></u-navbar>
    <view class="view-top">
      <view class="">
        <view v-if="item.status == 1" class="info_box-title-right">已报名，待确认</view>
        <view v-else-if="item.status == 2" class="info_box-title-right">待接单</view>
        <view v-else-if="item.status == 3" class="info_box-title-right">施工中</view>
        <view v-else-if="item.status == 4" class="info_box-title-right">待验收</view>
        <view v-else-if="item.status == 5" class="info_box-title-right">已报名，待确认</view>
        <view v-else-if="item.status == -1" class="info_box-title-right">
          <view class=""> 和遗憾，未入选 </view>
          <p style="color: #ff2d22">(保证金已退回)</p>
        </view>
      </view>
      <view class="price-box">
        <view class="price-item">
          <view class=""> ¥156000 </view>
          <p>项目报价</p>
        </view>
        <view class="price-item">
          <view class=""> ¥15600 </view>
          <p>保证金</p>
        </view>
      </view>
    </view>

    <view class="info_box">
      <view class="info_box-top">
        <view class="info_box-title"> 项目名称项目名称项目名称项 </view>
      </view>

      <view class="info_box-desc-time">
        <view class="info_box-desc"> 项目要求：专业工程队，技术过硬专业工程队技术过硬专 </view>
        <!-- <view class="info_box-desc">
					施工日期：2024-1-20至2025-2-20（共30天）
				</view>	 -->
        <view class="info_box-time">
          项目预算：<text>¥16000</text>
          <!-- <text style="color:#999999">（保证金¥1600）</text> -->
        </view>
      </view>
    </view>

    <view class="push-step">
      <view class="item-title"> 项目状态时间节点 </view>

      <view class="step-box">
        <view class="step-item" v-for="(item, indexx) in step" :key="indexx">
          <view class="icon-line">
            <view v-if="item.step == currentStep" class="current-icon"></view>
            <view v-else class="icon"></view>
            <view class="line" v-if="item.step != 0"></view>
          </view>
          <view class="content-desc">
            <view class="step-content">{{ item.content }}</view>
            <view class="step-desc">{{ item.desc }}</view>
          </view>
        </view>
      </view>
    </view>
    <!-- <view v-if="item.status == 2" class="floor-desc">
				注：超时不处理将扣除部分保证金
			</view> -->
    <view class="info-floor" v-if="item.status == 2">
      <view class="" style="flex: 1"> </view>
      <view class="info-floor-btn" style="color: #000000; border: #999999 solid 2rpx">
        联系客户
      </view>
      <view class="info-floor-btn" style="color: #8cc340; border: #8cc340 solid 2rpx">
        拒绝合作
      </view>
      <view class="info-floor-btn" style="background-color: #008ed6" @click="routeTo">
        接单合作
      </view>
    </view>

    <view class="info-floor" v-if="item.status == 3">
      <view class="floor-desc"> </view>
      <view
        class="info-floor-btn"
        style="background-color: #008ed6; width: 200rpx"
        @click="routeTo"
      >
        确认施工完成
      </view>
    </view>

    <view class="info-floor" v-if="item.status == -2">
      <view class="floor-desc"> </view>
      <view class="info-floor-btn" style="color: #8cc340; border: #8cc340 solid 2rpx">
        争议申诉
      </view>
      <view
        class="info-floor-btn"
        style="background-color: #008ed6; width: 180rpx"
        @click="routeTo"
      >
        重新申请验收
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      item: {
        status: -2
      },
      currentStep: 1,
      step: [
        {
          step: 0,
          content: '没有缴纳保证金，项目还未发布成功',
          desc: '2020-10-23'
        },
        {
          step: 1,
          content: '没有缴纳保证金，项目还未发布成功',
          desc: '2020-10-23'
        }
      ]
    }
  },
  methods: {}
}
</script>

<style>
page {
  background-color: #f7f7f7;
}
.view-top {
  background-color: #fff;
  padding: 20rpx;
  margin-bottom: 20rpx;
}
.view-list {
  padding: 20rpx;
}

.info_box {
  background-color: #ffffff;
  padding: 20rpx;
  margin-bottom: 20rpx;
}

.info_box-top {
  display: flex;
  align-items: center;
}

.info_box-title {
  font-weight: 700;
  margin: 15rpx 0;
  flex: 1;
}

.rectification {
  padding: 10rpx 20rpx;
  background-color: #f5e1df;
  color: #f54831;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 30rpx;
}

.info_box-desc-time {
  margin-bottom: 20rpx;
  line-height: 43rpx;
  font-size: 32rpx;
}
.info_box-desc {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.info_box-address {
  font-size: 27rpx;
  color: #666666;
}

.info-floor {
  display: flex;
  align-items: center;
  margin: 15rpx 0;
  font-size: 26rpx;
  color: #999999;
}
.floor-desc {
  font-size: 26rpx;
  color: #ff2d22;
  flex: 1;
}

.info_box-top-left {
  position: relative;
  line-height: 46rpx;
}
.info-floor-right {
  position: absolute;
  top: 0;
  right: 2rpx;
}
.info-top-left-price {
  color: #f54831;
  margin-left: 10rpx;
}
.info-top-left-tip {
  display: inline-block;
  font-size: 23rpx;
  border: #0f76bc solid 1px;
  color: #0f76bc;
  padding: 0 5rpx;
}

.info-floor-btn {
  display: inline-block;
  height: 55rpx;
  width: 130rpx;
  text-align: center;
  line-height: 55rpx;
  color: #ffffff;
  border-radius: 30rpx;
  margin: 0 8rpx;
}

.box-title {
  display: flex;
  flex-direction: row-reverse;
}

.info_box-title-right {
  font-size: 30rpx;
  color: #0f76bb;
  margin-bottom: 10rpx;
}

.price-box {
  display: flex;
  align-items: center;
  justify-content: space-around;
  background-color: #eeeeef;
  height: 130rpx;
}
.price-item view {
  text-align: center;
  font-size: 30rpx;
}
.price-item view {
  text-align: center;
  font-size: 30rpx;
}
.price-item p {
  text-align: center;
  font-size: 24rpx;
  color: #666666;
}
.warning {
  padding: 20rpx;
  background-color: #f5e8e6;
  color: #f54831;
  font-size: 26rpx;
  white-space: nowrap; /* 不换行 */
  overflow: hidden; /* 隐藏超出部分 */
  text-overflow: ellipsis; /* 显示省略号 */
}

.push-step {
  padding: 20rpx;
  background-color: #fff;
}

.step-box {
  display: flex;
  flex-direction: column-reverse;
}

.step-item {
  display: flex;
  height: 100rpx;
  margin-top: 16rpx;
}
.icon-line {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.current-icon {
  width: 45rpx;
  height: 45rpx;
  border-radius: 45rpx;
  flex-shrink: 0;
  background-color: #0f76bc;
}

.icon {
  width: 32rpx;
  height: 32rpx;
  border-radius: 32rpx;
  flex-shrink: 0;
  background-color: #c4e1f5;
  margin-top: 5rpx;
}
.line {
  width: 2rpx;
  height: 78rpx;
  flex-shrink: 0;
  border-left: #c4e1f5 solid 2rpx;
  margin: 8rpx 0;
}
.content-desc {
  flex: 9;
}
.step-content {
  font-size: 30rpx;
}
.step-desc {
  color: #999999;
  font-size: 25rpx;
  margin: 20rpx 0;
}
.info-floor {
  width: 100%;
  position: fixed;
  bottom: 5rpx;
  height: 80rpx;
  background-color: #fff;
}
</style>
